import { View, Text, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';

import { AtModal, AtModalContent } from 'taro-ui';
import 'taro-ui/dist/style/components/modal.scss';
interface IAgreeProps {
  isOpened: boolean;
  onCancel: Function;
  onSure: Function;
}

export default class AgreeModal extends Component<IAgreeProps, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  gotoProtocol() {
    // Taro.navigateTo({
    //   url: '/pages/package-I/protocol/userAgreement/index',
    // });
    Taro.downloadFile({
      url: 'https://credit.sxhyun.com/userAgreement.docx',
      success: function (res) {
        const filePath = res.tempFilePath;
        Taro.openDocument({
          filePath: filePath,
          success: function (res) {}
        });
      }
    })
  }

  render() {
    let { isOpened } = this.props;
    return (
      <View className="Model">
        <AtModal isOpened={isOpened} closeOnClickOverlay={false}>
          <AtModalContent>
            <View className="main">
              <ScrollView className="context" scrollY>
                <View>
                  <Text className="normal">嗨，欢迎您信任并使用魔力主题乐园。</Text>
                </View>
                <View>
                  <Text className="normal">
                    我们依据相关法律法规制定了
                    <Text
                      className="blue"
                      onClick={() => {
                        this.gotoProtocol()
                      }}
                    >
                      《用户协议》
                    </Text>
                    {/* <Text
                      className="blue"
                      onClick={() => {
                        Taro.navigateTo({
                          url: '/pages/package-I/protocol/privacyPolicy/index',
                        });
                      }}
                    >
                      《隐私协议》
                    </Text> */}
                    帮助你了解我们收集、使用、存储和共享个人信息的情况，请你在点击之前仔细阅读并充分理解相关条款，其中重点条款已为你标注，方便你了解自己的相关权利。
                  </Text>
                </View>
                <Text className="normal">
                  [请你留意] 我们将通过
                  <Text
                    className="blue"
                    onClick={() => {
                      this.gotoProtocol()
                    }}
                  >
                    《用户协议》
                  </Text>
                  向你说明 1.你在使用我们产品时，将会提供与具体功能相关的个人信息
                  (可能涉及身份认证、位置信息、观看历史、设备信息、操作日志等);2.你可以在个人中心页面访问您的个人信息；3.我们会采用业界领先的安全技术保护好你的个人信息。未经你的授权同意，我们不会将上述信息共享给第三方或用于你未授权的其他用途;
                </Text>
                <Text className="normal">
                  你可以通过阅读完整版《用户协议》了解详细信息。
                </Text>
                <View>
                  <Text className="normal">如你同意，请点击“同意并继续”开始接受我们的服务。</Text>
                </View>
              </ScrollView>
              <View className="go">
                <Text className="agree" onClick={() => this.props.onSure()}>
                  同意并继续
                </Text>
                <Text className="notAgree" onClick={() => this.props.onCancel()}>
                  不同意
                </Text>
              </View>
            </View>
          </AtModalContent>
        </AtModal>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
